import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomTextEllipsize from 'src/components/custom-text-ellipsize/index'
import { generateFuzzyQuery } from '../../utils/FuzzyQueryUtil'
import TagView from '../tag-view/index'
import { getDistance, getSettlementMethod, isFastImg, unitList } from 'src/utils/ConfigUtil'
import { formatTime, todayYestodayTime, utilToKilo } from '../../utils/TimeUtil'
import JobType from 'src/components/job-type'
import CustomImage from 'src/components/image/CustomImage'

export default class JobCell extends React.PureComponent {
  static propTypes = {
    item: PropTypes.object,
    landmark: PropTypes.object,
    isCollection: PropTypes.bool,
    showJobType: PropTypes.bool,
    onlyShowFast: PropTypes.bool,
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    tagViewStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
  }

  static defaultProps = {
    isCollection: false,
    showJobType: false,
    onlyShowFast: false
  }

  /**
   * 获取地址
   * */
  _getAddress = () => {
    const { landmark: { cityName, currentLocation = {} }, item: { postWorkLocations = [], distance } } = this.props
    const address = {
      addressName: '',
      distance: '',
      areaName: ''
    }
    if (postWorkLocations.length > 0) {
      const cityReg = generateFuzzyQuery(cityName)
      const workLocations = postWorkLocations.reduce((workLocations, currentValue) => {
        if (cityReg.test(currentValue.cityName) || cityReg.test(currentValue.address)) { // 如果城市或者地址里面包含当前的位置，就选中
          workLocations.push(currentValue)
        }
        return workLocations
      }, [])
      if (workLocations.length > 0) {
        address.addressName = workLocations[0].addressSimple || workLocations[0].address
        address.areaName = workLocations[0].areaName
        address.distance = distance ? `${Number(distance / 1000)}km` : getDistance(currentLocation.lat, currentLocation.lng, workLocations[0].latitude, workLocations[0].longitude)
      }
    }
    return address
  }

  render () {
    const { item, isCollection, style, tagViewStyle, showJobType, onlyShowFast } = this.props
    const basicInfoModel = item.basicInfoModel
    const settlementMethodObj = item && item.basicInfoModel
      ? (item.basicInfoModel.type == 0 ? { unit: `元/${unitList[(item.basicInfoModel.unit !== '' && item.basicInfoModel.unit !== undefined)
        ? item.basicInfoModel.unit
        : (item.basicInfoModel.settlementMethod * 1 + 1)]}` }
        : getSettlementMethod(item.basicInfoModel.settlementMethod)) : {}
    const address = this._getAddress()
    const salaryUnit = basicInfoModel.salary >= 10000 ? settlementMethodObj.unit.replace('元', '') : settlementMethodObj.unit
    return (
      <View style={[styles.cell].concat(style)}>
        <View style={styles.top}>
          <View style={styles.topLeft}>
            <CustomTextEllipsize style={styles.name} text={basicInfoModel.name} />
            {!onlyShowFast && showJobType && (
              <JobType type={basicInfoModel.type} isFast={parseInt(item.isFast)}/>
            )}
            {
              onlyShowFast && parseInt(item.isFast) === 1 && <CustomImage style={styles.tagImg} source={isFastImg}/>
            }
          </View>
          <Text style={styles.price}>
            {utilToKilo(basicInfoModel.salary)}
          </Text>
          <Text style={styles.unit}>
            {salaryUnit}
          </Text>
        </View>
        {
          !!address.addressName && (
            <View style={styles.cellCenter}>
              <CustomTextEllipsize
                style={styles.leftAddress}
                text={address.addressName}/>
              <Text style={styles.rightDistance}>{address.distance}</Text>
            </View>
          )
        }
        <View style={[styles.bottom].concat(tagViewStyle)}>
          <View style={styles.bottomLeft}>
            {
              isCollection ? (
                <TagView
                  style={styles.tagView}
                  tagLabel={Number(basicInfoModel.practiceLabel === 1) ? '实习' : Number(basicInfoModel.type) === 1 ? '全职' : '兼职'}/>
              ) : (
                <TagView style={styles.tagView} tagLabel={address.areaName || item.area}/>
              )
            }
            <TagView style={styles.tagView} tagLabel={settlementMethodObj.short}/>
            <TagView style={styles.tagView} tagLabel={basicInfoModel.category}/>
          </View>
          <View style={styles.bottomRightView}>
            {
              isCollection && !!item.gmtCreate && (
                <Text
                  style={styles.bottomRightText}>{todayYestodayTime(new Date(formatTime(item.gmtCreate)).getTime())}</Text>
              )
            }
          </View>
          {!!basicInfoModel.interviewState && <Text style={styles.bottomRight}>已面试</Text>}
        </View>
        {
          this.renderBottom()
        }
      </View>
    )
  }

  /**
   * 渲染底部
   */
  renderBottom () {
    return null
  }
}

const styles = StyleSheet.create({
  cell: {
    width: '100%',
    paddingTop: ScaleS(25),
    paddingBottom: ScaleS(15),
    paddingHorizontal: ScaleS(20),
    borderBottomWidth: ScaleS(1),
    borderStyle: 'solid',
    borderColor: 'rgba(120, 120, 120, .1)'
  },
  top: {
    // width: '100%',
    flexDirection: 'row',
    // justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  topLeft: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  name: {
    fontSize: ScaleT(18),
    fontWeight: '500',
    color: '#000000',
    lineHeight: ScaleS(29),
    minHeight: ScaleS(29),
    maxWidth: ScaleS(230)
  },
  tagImg: {
    marginLeft: ScaleS(4),
    width: ScaleS(18),
    height: ScaleS(21),
    resizeMode: 'cover'
  },
  topRight: {
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  price: {
    textAlign: 'right',
    marginHorizontal: ScaleS(3),
    height: ScaleS(28),
    fontSize: ScaleT(24),
    fontWeight: 'bold',
    color: '#FFC61C',
    lineHeight: ScaleS(28)
  },
  unit: {
    marginTop: ScaleS(9),
    height: ScaleS(17),
    fontSize: ScaleT(12),
    fontWeight: '500',
    color: '#444444',
    lineHeight: ScaleS(17)
  },
  cellCenter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginTop: ScaleS(16)
  },
  leftAddress: {
    color: '#999999',
    fontSize: ScaleT(13),
    fontWeight: '400',
    maxWidth: ScaleS(230)
  },
  rightDistance: {
    color: '#999999',
    fontSize: ScaleT(13),
    fontWeight: '400'
  },
  bottom: {
    marginTop: ScaleS(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  bottomLeft: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-start',
    flexWrap: 'wrap'
  },
  tagView: {
    marginRight: ScaleS(15)
  },
  tagText: {
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#999999',
    lineHeight: ScaleS(28)
  },
  bottomRightView: {},
  bottomRightText: {
    color: '#000000',
    fontSize: ScaleT(12),
    fontWeight: '400'
  },
  bottomRight: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#444444',
    lineHeight: ScaleS(28)
  }
})
